<template>
  <view class="phxx-item">
    <view class="phxx-item-content">
      <view class="top">
        <view class="cname-box">
          <view class="cname">{{ itemList.carBrand || ''}}</view>
          <view class="cname-fu">{{ itemList.purchase || ''}} | {{ itemList.proName || ''}}</view>
        </view>
        <view
          :class="{'gray-type': itemList.status == 8,'orange-type': (itemList.status == 0) || (itemList.status == 1),'blue-type': (itemList.status == 2) || (itemList.status == 3) || (itemList.status == 4) || (itemList.status == 5) || (itemList.status == 6),
									 'green-type': itemList.status == 7,'red-type': (itemList.status == 9) || (itemList.status == 10),'status': true}">
          {{ statusName[itemList.status] }}
        </view>
      </view>
      <view class="body-box no-back">
        <view class="bottom">
          <view class="items full">
            <text class="til col66">供应商</text>
            <text class="val col3">{{ itemList.supName || '-'}}</text>
          </view>
        </view>
        <view class="bottom">
          <view class="items full">
            <text class="til col66">承运单位</text>
            <text class="val col3">{{ itemList.cusTransport || '-'}}</text>
          </view>
        </view>
        <view class="bottom">
          <view class="items full">
            <text class="til col66">卸货地</text>
            <text class="val col33">{{ itemList.landingPlace || ''}}</text>
          </view>
        </view>
        <view class="bottom">
          <view class="items full">
            <text class="til col66">卸货点</text>
            <text class="val col33">{{ itemList.landingPointName || ''}}</text>
          </view>
        </view>
      </view>

      <view class="bottom gray-items">
        <view class="items title">
          <text class="tils blue">矿发:</text>
        </view>
        <view class="items num-box font14">
          <view class="til col99 font13">毛重</view>
          <view class="val col00 font16 fontwtb">{{ itemList.mineralGrossWeight || '-'}}</view>
        </view>
        <view class="items num-box font14">
          <view class="til col99 font13">皮重</view>
          <view class="val col00 font16 fontwtb">{{ itemList.mineralTareWeight || '-'}}</view>
        </view>
        <view class="items num-box font14">
          <view class="til col99 font13">净重</view>
          <view class="val col00 font16 fontwtb">{{ itemList.driverWeight || '-'}}</view>
        </view>
      </view>

      <view class="bottom gray-items">
        <view class="items title" style="">
          <text class="tils red">到站</text>
        </view>
        <view class="items num-box font14">
          <view class="til col99 font13">毛重</view>
          <view class="val col00 font16 fontwtb">{{ itemList.grossWeight || '-'}}</view>
        </view>
        <view class="items num-box font14">
          <view class="til col99 font13">皮重</view>
          <view class="val col00 font16 fontwtb">{{ itemList.netWeight || '-'}}</view>
        </view>
        <view class="items num-box font14">
          <view class="til col99 font13">净重</view>
          <view class="val col00 font16 fontwtb">{{ itemList.totalWeight || '-'}}</view>
        </view>
      </view>
      <view class="bottom block-items">
        <view class="items gray-back">
          <view class="til col99 font13">亏吨</view>
          <view class="val col00 font16 fontwtb">{{ itemList.deficientTon || '-'}}</view>
        </view>
        <view class="items gray-back">
          <view class="til col99 font13">涨吨</view>
          <view class="val col00 font16 fontwtb">{{ itemList.riseTon || '-'}}</view>
        </view>
        <view class="items gray-back">
          <view class="til col99 font13">扣费</view>
          <view class="val col00 font16 fontwtb">{{ itemList.deductCost || '-'}}</view>
        </view>
      </view>
      <!-- <view class="bottom-btn" v-if="1==2">
        <view>
          <button class="cancelBtn small" size="mini" @click="examine()">审核</button>
        </view>
      </view> -->
      <view class="bottom-btn">
        <view v-if="itemList.statusType == '0'">
          <button class="cancelBtn" size="mini" v-if="hasPermissionCancel"
            @click.stop="cancelPurOrder(itemList.id)">取消</button>
        </view>
        <view v-if="statusName[itemList.status] == '待确认'">
          <button class="cancelBtn" size="mini" v-if="hasPermission"
            @click.stop="confirmReceipt(itemList)">确认收货</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import config from '@/config';

  export default {
    name: 'row-number',
    props: {
      itemList: {
        type: Object,
        default: {
          carBrand: '',
          statusName: '',
          enterName: '',
          cusTransport: '',
          proName: '',
          freight: '',
          landingPlace: '',
          landingPointName: '',
          mineralGrossWeight: '',
          mineralTareWeight: '',
          driverWeight: '',
          grossWeight: '',
          netWeight: '',
          totalWeight: '',
          deficientTon: '',
          riseTon: '',
          deductCost: '',
        }
      },
      hasPermission: false,
      hasPermissionCancel: false
    },
    data() {
      return {
        statusName: {
          "0": '待供应商审核',
          "1": '待采购方审核',
          "2": '待入场',
          "3": '待称毛',
          "4": '待确认',
          "5": '待录皮',
          "6": '待出厂',
          "7": '已完成',
          "8": '已作废',
          "9": '已终止',
          "10": '挂起',
        },
        formData: {},
        cancelTypeList: [
          {
            value: 1,
            text: '拒收货物'
          },
          {
            value: 2,
            text: '接错单'
          },
          {
            value: 3,
            text: '其他'
          }
        ],
      }
    },
    computed: {
      tipPath() {
        return config.baseImgUrl + '/warn-icon.png';
      },
    },
    methods: {
      examine() {

      },
      queueRule() {

      },
      handleClick(item, type) {
        console.log(item);
        this.$emit('manualCalling', item, type);
      },
      confirmReceipt(item) {
        this.$modal.confirm('确认收货后，司机将前往空磅称皮').then(() => {
          this.$emit('showButton', item);
        });
      },
      //取消运单
      async cancelPurOrder(id) {
        this.$emit('cancelPurOrder', id);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .phxx-item {
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    font-size: 24.88rpx;
    color: #000;
    background: linear-gradient(180deg, #deeeff, #ffffff 21%);

    .phxx-item-content {
      width: 644rpx;

      .body-box {
        padding: 0 0 0 8rpx !important;
      }

      .top {
        width: 100%;
        border-bottom: 1rpx solid #e6e6e6;
        position: relative;
        padding: 0 8rpx 20rpx 8rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 26.66rpx;

        .cname-box {
          font-size: 23.11rpx;
        }

        .cph {
          font-size: 28.44rpx;
          font-weight: 700;
        }

        .cname {
          font-weight: 700;
          color: #000;
          font-size: 32rpx;
        }

        .cname-fu {
          color: #333;
        }

        .status {
          font-size: 26.66rpx;
          padding: 0 20rpx;
          text-align: center;
          border-radius: 10rpx;
          display: block;
          height: 29px;
          line-height: 29px;
        }
      }

      .center {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 20rpx 5rpx;

        .gs {
          margin-right: 30rpx;
          font-size: 28.44rpx;
        }

        .gs,
        .mz,
        .location {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 50%;
        }
      }

      .button-wrapper {
        display: flex;
        justify-content: flex-end;
      }

      .bottom-btn {
        border-top: 1px solid #e8e7e7;
        margin-top: 20rpx;
        padding-top: 20rpx;
        display: flex;
        justify-content: flex-end;

        >view+view {
          margin-left: 20rpx;
        }
      }

      .bottom.space {
        border-bottom: 1rpx solid #e6e6e6;
      }


      .bottom.gray-items {
        position: relative;
        background-color: #f1f2f5;
        padding: 0;
        margin: 8px 0;
        border-radius: 8rpx;

        .items {
          padding: 0;
        }

        .items:nth-child(2) {
          margin-left: 96rpx;
        }

        .title {
          width: 96rpx;
          position: absolute;
        }
      }

      .bottom {
        padding: 20rpx 0 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 24.88rpx;

        >.items {
          padding-bottom: 10rpx;
          width: 50%;

          .img-box {
            position: absolute;
            width: 110px;
            height: 80px;
            left: 128rpx;
            top: 3px;

            .cover-img {
              width: 100%;
              height: 100%;
            }
          }

          .tils {
            width: 96rpx;
            height: 80rpx;
            display: inline-block;
            border-radius: 10rpx 0 0 10rpx;
            text-align: center;
            line-height: 80rpx;
          }

          .tils.blue {
            background-color: #D9ECFF;
            color: #409EFE;
            font-weight: bold;
          }

          .tils.red {
            background-color: #FFECEC;
            color: #FF4D4F;
            font-weight: bold;
          }
        }

        .items.num-box {
          height: 80rpx;
          width: 30%;
          text-align: center;

          >view {
            width: 100%;
          }

          .val {
            margin-left: 0;
          }

          .til {}

          .til,
          .val {
            height: 40rpx;
            line-height: 43rpx;
          }
        }

        .items.full {
          width: 100% !important;
          display: flex;
          justify-content: space-between;
        }

        .til {
          display: inline-block;
        }

        .val {
          margin-left: 15rpx;
        }
      }

      .line {
        width: 100%;
        /* 设置宽度为屏幕宽度 */
        height: 1px;
        /* 设置高度为实线的粗细 */
        background-color: #ccc;
        /* 设置背景色为灰色 */
      }
    }
  }
</style>